<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="a"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
          type="index"
          width="50"
      >
      </el-table-column>
      <el-table-column
          type="selection"
          width="55"
      >
      </el-table-column>
      <el-table-column prop="image" label="图片" min-width="30%">
        <!-- 图片的显示 -->
        <!--        <template slot-scope="scope">-->
        <!--          <img :src="'./../'+scope.row.imageUrl" min-width="70" height="70"/>-->
        <!--        </template>-->
        <img src="./../assets/images/2.png" min-width="70" height="70"/>
      </el-table-column>
      <el-table-column
          prop="brandName"
          label="品牌"
          width="90">
        金正大
      </el-table-column>
      <el-table-column
          prop="productName"
          label="产品"
          width="100">
      </el-table-column>
      <el-table-column
          prop="productDescribe"
          label="描述"
          width="200">
      </el-table-column>
      <el-table-column
          prop="categoryName"
          label="类型"
          width="150">
      </el-table-column>
      <el-table-column
          prop="productPrice"
          label="单价(元)"
          width="70">
      </el-table-column>
      <el-table-column
          prop="height"
          label="质量"
          width="70">
      </el-table-column>
      <el-table-column
          prop="productNum"
          label="数量"
          width="90">
        <template slot-scope="scope">
          <input style="width: 60px" min="1" max="50" type="number" v-model="a[scope.$index].productNum" name="" id="txt"
                 @keyup="total()" @change="total()"
                 oninput="value=value.replace(/[^\d]/g,'') "/>
        </template>
      </el-table-column>
      <el-table-column
          label="小计"
          width="100">
        <template slot-scope="scope">
          {{a[scope.$index].payMoney}}元
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleDelete(scope.$index, scope.row)">移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
      <el-button @click="result" style="float: right;margin-right: 22%">结算</el-button>
      <span
          style="float: right;
                    height: 40px;
                        font-size: 30px;margin-right: 4%">￥ {{totalPay}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'shoppingCar',
  data () {
    return {
      a: [],
      b: [],
      multipleSelection: [],
      totalPay: 0
    }
  },
  created () {
    this.initGetData()
  },
  methods: {
    result () {
      if (this.multipleSelection.length) {
        this.$router.push({
          path: '/createOrder',
          query: {
            item: this.multipleSelection
          }
        })
      } else {
        this.$alert('亲，你还未勾选你要结算的商品哦，请勾选后再来点击人家吧', '提示', {
          confirmButtonText: '确定',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${action}`
            })
          }
        })
      }
    },
    handleDelete (index, row) {
      this.$confirm('亲，你真的要移除我吗，你可以从客服小姐姐哪里，再多了解我一下哦。', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '你个小讨厌，就这么嫌弃人家吗!'
        })
        let item = row
        this.$axios.post('shoppingCart/delShoppingCart', [{ dealerId: this.$store.getters.getCompany.dealerId, productId: item.productId }])
          .then(() => {
            this.initGetData()
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '感谢你让人家回归你的购物车，么么哒💗'
        })
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
      this.total()
    },
    initGetData () {
      this.$axios.post('shoppingCart/queryShoppingCart', { dealerId: this.$store.getters.getCompany.dealerId })
        .then((response) => {
          this.a = response.data.data
          console.log('购物车')
          console.log(this.a)
        })
    },
    total () {
      this.totalPay = 0
      for (let i = 0; i < this.a.length; i++) {
        this.a[i].payMoney = this.a[i].productNum * this.a[i].productPrice
        let tempObj = this.a[i]
        this.$set(this.a, i, tempObj)
      }
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.totalPay += this.multipleSelection[i].payMoney
      }
    }
  },
  computed: {}
}

</script>
